<script setup>
import ChatInput from '@/components/app-chat/cpn/chat-input/chat-input.vue'
import useChatStore from '@/store/chat'
import {onMounted, ref} from 'vue'

defineProps(['chatContent'])

//滚动到底部
const chatDetailRef = ref(null)
const handleScrollToBottom = () => {
  chatDetailRef.value?.scrollTo(0, chatDetailRef.value.scrollHeight)
}
onMounted(() => {
  const timer = setTimeout(() => {
    handleScrollToBottom()
    clearTimeout(timer)
  }, 0)
})

//发送文字
const chatStore = useChatStore()
const handleEmit = async (e) => {
  //发送网络请求
  await chatStore.fetchPushChatAction(e)

  //页面滚动到底部
  handleScrollToBottom()
}

defineExpose({handleScrollToBottom})
</script>

<template>
  <div class="chat-detail">
    <div class="chat-list-box" ref="chatDetailRef">
      <template v-for="{type, text, time} in chatContent" :key="time">
        <view class="chat-item" :class="{'my-chat': type === 0}">{{ text }}</view>
      </template>
    </div>
    <!-- 输入框 -->
    <chat-input @emit="handleEmit"/>
  </div>
</template>

<style lang="scss" scoped>
.chat-detail {
  position: relative;
  @include full-box;
}

.chat-list-box {
  @include grid-box(false, true);
  @include full-box;
  padding-bottom: 100px;
  gap: $spacing-3;
  overflow: auto;
}

.secondary-tab-bar {
  padding: $spacing-4 0 0;
}

.chat-item {
  background: $light-bg;
  padding: $spacing-4;
  border-radius: 0 $border-radius-2 $border-radius-2 $border-radius-2;
  max-width: 85%;
  justify-self: start;
  width: auto;
}

.my-chat {
  background: $black;
  color: $white;
  border-radius: $border-radius-2 0 $border-radius-2 $border-radius-2;
  text-align: right;
  justify-self: end;
}
</style>
